* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}

#donar {
    text-align: center;
}

#txtdonar {
    padding-left: 5%;
    padding-right: 5%;
    padding-top: 2%;
}

header {
    height: 50px;
    background: white;
    color: black;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

header label {
    font-size: 30px;
    cursor: pointer;
    display: none;
}

#btn-menu {
    display: none;
}

.menu ul {
    background: white;
    color: black;
    display: flex;
    list-style: none;
}

.menu ul ul {
    display: none;
}

.menu a {
    display: block;
    padding: 15px 20px;
    color: black;
    text-decoration: none;
}

.menu a:hover {
    background: black;
    color: white;
}

.menu a span {
    margin-left: 10px;
}

.menu ul li:hover ul {
    display: block;
    position: absolute;
}

.sobra {
    background-color: white;
    padding: .1%;
    text-align: center;
}

#tt {
    font-size: 250%;
    color: black;
    text-align: center;
}

#nn {
    font-size: 100%;
    color: black;
    text-align: center;
}

#bb {
    font-size: 120%;
    color: black;
    text-align: center;
}

footer {
    background-color: black;
    color: white;
    text-align: center;
    height: 100px;
    font-size: 100%;
    clear: right;
    margin: 100px 0px 0px 0px;
}

body {
    height: calc(100vh - 50px - 80px);
}

footer a {
    color: white;
}

.boton {
    display: inline;
    border: 2px;
    padding: 4px;
    margin: 2px;
    text-decoration: none;
    color: #363636;
    line-height: 1em;
    float: right;
    background-color: #EEEEEE;
}

#aviso {
    color: #363636;
    text-align: center;
}

#abo {
    color: #363636;
    text-align: center;
    padding: 10%;
}


/*
#img{
  margin-left: 3%;
  margin-right: 3%;
}
*/

#contenido {
    width: 90%;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 3em;
    margin-bottom: 3em;
    display: grid;
    grid-template-columns: repeat(3, 3fr);
    align-items: center;
}

#container {
    max-width: 100%;
    display: block;
}

iframe {
    transition: all 300ms;
}

iframe:hover {
    transform: scale(1.05);
}

.boton {
    transition: all 300ms;
}

.boton:hover {
    transform: scale(1.05);
}

@media (max-width:1024px) {
    header label {
        display: block;
        top: 20px;
    }
    .menu {
        position: absolute;
        top: 15%;
        left: 0;
        ;
        width: 100%;
        transform: translateX(-100%);
        transition: all 0.3s;
    }
    .menu ul {
        display: block;
        background: gray;
    }
    .menu ul li:hover ul {
        display: none;
        position: static;
        background: #D1D1D1;
    }
    .menu a span {
        position: absolute;
        right: 5px;
    }
    #btn-menu:checked~.menu {
        transform: translateX(0%);
    }
    footer a {
        color: white;
    }
    footer {
        background-color: black;
        color: white;
        text-align: center;
        height: 100px;
        font-size: 100%;
        clear: right;
        margin: 100px 0px 0px 0px;
    }
    #tt {
        font-size: 250%;
        color: black;
        text-align: center;
    }
    #nn {
        font-size: 100%;
        color: black;
        text-align: center;
    }
    #bb {
        font-size: 120%;
        color: black;
        text-align: center;
    }
    #contenido {
        grid-template-columns: repeat(2, 2fr);
    }
}

@media (max-width:767px) {
    header label {
        display: block;
        top: 20px;
    }
    .menu {
        position: absolute;
        top: 15%;
        left: 0;
        ;
        width: 100%;
        transform: translateX(-100%);
        transition: all 0.3s;
    }
    .menu ul {
        display: block;
        background: gray;
    }
    .menu ul li:hover ul {
        display: none;
        position: static;
        background: #D1D1D1;
    }
    .menu a span {
        position: absolute;
        right: 5px;
    }
    #btn-menu:checked~.menu {
        transform: translateX(0%);
    }
    footer a {
        color: white;
    }
    footer {
        background-color: black;
        color: white;
        text-align: center;
        height: 100px;
        font-size: 100%;
        clear: right;
        margin: 100px 0px 0px 0px;
    }
    #tt {
        font-size: 250%;
        color: black;
        text-align: center;
    }
    #nn {
        font-size: 100%;
        color: black;
        text-align: center;
    }
    #bb {
        font-size: 120%;
        color: black;
        text-align: center;
    }
    #contenido {
        grid-template-columns: repeat(1, 1fr);
        margin-left: 10%;
        margin-right: 9%;
    }
}